<template>
  <div class="container">
    <div class="app-container">
      <el-table default-expand-all :data="list" row-key="id">
        <el-table-column prop="name" label="责任域" />

        <!-- 部门 -->
        <el-table-column label="部门" align="center">
          <template v-slot="{ row }">
            <span
              v-for="dept in row.departments"
              :key="dept.name"
              :class="['ccc', 'ellipsis']"
            >
              {{ dept.name }}
            </span>
          </template>
        </el-table-column>

        <!-- 责任人 -->
        <el-table-column label="责任人" align="center">
          <template v-slot="{ row }">
            <span
              v-for="dept in row.departments"
              :key="dept.name"
              :class="['ccc', 'ellipsis']"
            >
              <span class="cnm">{{ dept.responsiblePerson }}</span>
            </span>
          </template>
        </el-table-column>

        <!-- 初始积分 -->
        <el-table-column label="初始积分" align="center">
          <template v-slot="{ row }">
            <span
              v-for="dept in row.departments"
              :key="dept.name"
              :class="['ccc', 'ellipsis']"
            >
              {{ dept.initialScore }}
            </span>
          </template>
        </el-table-column>

        <!-- 循环每一天 -->
        <template v-for="day in days">
          <el-table-column :label="day.label" align="center" :key="day.label">
            <el-table-column label="积分" align="center" :key="day.label">
              <template v-slot="{ row }">
                <span
                  v-for="dept in row.departments"
                  :key="dept.name"
                  :class="['ccc', 'ellipsis']"
                >
                  {{ getDeductions(dept, day.label, 'deduction') }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="原因" align="center" :key="day.label">
              <template v-slot="{ row }">
                <span
                  v-for="dept in row.departments"
                  :key="dept.name"
                  :class="['ccc', 'ellipsis']"
                >
                  {{ getDeductions(dept, day.label, 'reason') }}
                </span>
              </template>
            </el-table-column>
          </el-table-column>
        </template>

        <!-- 当前积分 -->
        <el-table-column label="当前积分" align="center">
          <template v-slot="{ row }">
            <span
              v-for="dept in row.departments"
              :key="dept.name"
              :class="['ccc', 'ellipsis']"
            >
              {{ dept.currentScore }}
            </span>
          </template>
        </el-table-column>

        <!-- 本周部门扣分 -->
        <el-table-column label="本周部门扣分" align="center" width="200">
          <template v-slot="{ row }">
            <span
              v-for="dept in row.departments"
              :key="dept.name"
              :class="['ccc', 'ellipsis']"
            >
              {{ dept.weeklyDepartmentDeduction }}
            </span>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="200">
          <template v-slot="{ row }">
            <span
              v-for="dept in row.departments"
              :key="dept.name"
              :class="['block-display']"
            >
              <el-button
                v-if="row.type === 1"
                size="mini"
                type="text"
                @click="addPermission(dept.id, 2)"
                >添加</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="editPermission(dept.id)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="delPermission(dept.id)"
                >删除</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
export default {
  name: 'Department',
  data() {
    return {
      list: [
        {
          id: 1,
          name: '责任域1',
          departments: [
            {
              name: '部门1',
              responsiblePerson: '责任人1',
              initialScore: 100,
              deductions: [
                  { date: '08-12', deduction: 10, reason: '原因1' },
                  { date: '08-13', deduction: 5, reason: '原因2' },
                  { date: '08-14', deduction: 5, reason: '原因2' },
                  { date: '08-15', deduction: 5, reason: '原因2' },
                  { date: '08-16', deduction: 5, reason: '原因2' },
                  { date: '08-17', deduction: 5, reason: '原因2' },
                  { date: '08-18', deduction: 5, reason: '原因2' },
              ],
              currentScore: 90,
              weeklyDepartmentDeduction: 5,
            },
            {
              name: '部门2',
              responsiblePerson: '责任人2',
              initialScore: 100,
              deductions: [
                  { date: '08-12', deduction: 10, reason: '原因1' },
                  { date: '08-13', deduction: 5, reason: '原因2' },
                  { date: '08-14', deduction: 5, reason: '原因2' },
                  { date: '08-15', deduction: 5, reason: '原因2' },
                  { date: '08-16', deduction: 5, reason: '原因2' },
                  { date: '08-17', deduction: 5, reason: '原因2' },
                  { date: '08-18', deduction: 5, reason: '原因22222222222' },
              ],
              currentScore: 90,
              weeklyDepartmentDeduction: 5,
            },
          ],
          type: 1
        },
        {
          id: 1,
          name: '责任域2',
          departments: [
            {
              name: '部门1',
              responsiblePerson: '责任人1',
              initialScore: 100,
              deductions: [
                  { date: '08-12', deduction: 10, reason: '原因1' },
                  { date: '08-13', deduction: 5, reason: '原因2' },
                  { date: '08-14', deduction: 5, reason: '原因2' },
                  { date: '08-15', deduction: 5, reason: '原因2' },
                  { date: '08-16', deduction: 5, reason: '原因2' },
                  { date: '08-17', deduction: 5, reason: '原因2' },
                  { date: '08-18', deduction: 5, reason: '原因2' },
              ],
              currentScore: 90,
              weeklyDepartmentDeduction: 5,
            },
            {
              name: '部门2',
              responsiblePerson: '责任人2',
              initialScore: 100,
              deductions: [
                  { date: '08-12', deduction: 10, reason: '原因1' },
                  { date: '08-13', deduction: 5, reason: '原因2' },
                  { date: '08-14', deduction: 5, reason: '原因2' },
                  { date: '08-15', deduction: 5, reason: '原因2' },
                  { date: '08-16', deduction: 5, reason: '原因2' },
                  { date: '08-17', deduction: 5, reason: '原因2' },
                  { date: '08-18', deduction: 5, reason: '原因22222222222' },
              ],
              currentScore: 90,
              weeklyDepartmentDeduction: 5,
            },
          ],
          type: 1
        },
        {
          id: 1,
          name: '责任域2',
          departments: [
            {
              name: '部门1',
              responsiblePerson: '责任人1',
              initialScore: 100,
              deductions: [
                  { date: '08-12', deduction: 10, reason: '原因1' },
                  { date: '08-13', deduction: 5, reason: '原因2' },
                  { date: '08-14', deduction: 5, reason: '原因2' },
                  { date: '08-15', deduction: 5, reason: '原因2' },
                  { date: '08-16', deduction: 5, reason: '原因2' },
                  { date: '08-17', deduction: 5, reason: '原因2' },
                  { date: '08-18', deduction: 5, reason: '原因2' },
              ],
              currentScore: 90,
              weeklyDepartmentDeduction: 5,
            },
            {
              name: '部门2',
              responsiblePerson: '责任人2',
              initialScore: 100,
              deductions: [
                  { date: '08-12', deduction: 10, reason: '原因1' },
                  { date: '08-13', deduction: 5, reason: '原因2' },
                  { date: '08-14', deduction: 5, reason: '原因2' },
                  { date: '08-15', deduction: 5, reason: '原因2' },
                  { date: '08-16', deduction: 5, reason: '原因2' },
                  { date: '08-17', deduction: 5, reason: '原因2' },
                  { date: '08-18', deduction: 5, reason: '原因22222222222' },
              ],
              currentScore: 90,
              weeklyDepartmentDeduction: 5,
            },
          ],
          type: 1
        },
      ],
      days: [
        { label: '08-12' },
        { label: '08-13' },
        { label: '08-14' },
        { label: '08-15' },
        { label: '08-16' },
        { label: '08-17' },
        { label: '08-18' },
      ],
    };
  },
  methods: {
    getDeductions(department, date, type) {
      const deduction = department.deductions.find(d => d.date === date);
      return deduction ? deduction[type] : '-';
    }
  }
};
</script>
<style scoped>
/* 移除内边距 */
.el-table__cell {
  padding: 0 !important;
}

/* 移除表格列标题的内边距 */
.el-table th {
  padding: 0 !important;
}

/* 移除表格单元格内的内容的内边距 */
.el-table td,
.el-table th.is-leaf {
  border-bottom: none; /* 移除底部边框 */
  padding: 0 !important;
}

/* 移除表格单元格内的内容的内边距 */
.el-table .cell {
  padding-left: 0;
  padding-right: 0;
  padding: 0 !important;
}

/* 移除表格单元格内的 span 的内边距 */
span.ellipsis {
  padding: 0 !important;
}

/* 文本溢出时显示省略号 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 自定义部门样式 */
.ccc {
  padding: 0 !important;
  flex-direction: column !important;
  display: flex !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 10px;
}

.block-display {
  display: block;
}


</style>
